<script setup lang="ts">
import FilpClock from '@renderer/composables/FilpClock'
import { onMounted, watch } from 'vue'

import '@renderer/assets/scss/flipClock.scss'
import { useConfigStore } from '@renderer/store/config'

const { config } = useConfigStore()
const instance = new FilpClock({ el: '#hd', ...config.clock })
const refresh = () => {
  console.log('双击')
  if (config.clock.type === 'clock') return
  instance
    .destroy()
    .config({ el: '#hd', ...config.clock })
    .render()
}

watch(
  () => config.clock.type,
  () => {
    console.log(config.clock.type, 13)
    instance
      .destroy()
      .config({ el: '#hd', ...config.clock })
      .render()
  }
)

onMounted(() => {
  instance.render()
})
</script>

<template>
  <main class="flex flex-col justify-center items-center">
    <div
      id="hd"
      @dblclick="refresh"
      :style="{
        '--bgColor': config.clock.bgColor,
        '--color': config.clock.color
      }"
    ></div>
  </main>
</template>
